<template>
  <div>
    <van-row>
      <van-col span="8">
        <li v-for="i in worklist" :key="i.id">{{i.name}} &nbsp;&nbsp;&nbsp; <span @click="id=i.id"> <font color="blue">参数配置</font> </span></li>
      </van-col>
      <van-col span="16">
        <table>
          <tr v-for="(i,index) in lst" :key="index">
            <td><van-field :label="i['label']" v-model="values[index]" /></td>
            <td>
              <select v-model="typevalues[index]">
                <option value="input">输入框</option>
                <option value="radio">单选框</option>
                <option value="checkbox">复选框</option>
                <option value="select">下拉框</option>
                <option value="file">文件</option>
                <option value="datetime">日期</option>
              </select>
            </td>
            <td>
              <van-field label="值" v-model="sourcevalues[index]" />
              <van-button @click="getsource(index)">选择数据源</van-button>
            </td>
          </tr>
        </table>
        <van-button @click="add">+</van-button>
        <van-button @click="addwork">提交</van-button>
        <el-dialog v-model="dialogTableVisible" title="数据源选择">
          <div>
            <van-row>
              <van-col span="12">
                <select v-model="selectid" @change="selectdata">
                  <option :value="i.id" v-for="i in sourcelist" :key="i.id"> {{i.name}}</option>
                </select>
              </van-col>
              <van-col span="12">
                <el-table
                    ref="singleTable"
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%"
                    @current-change="handleCurrentChange"
                >
                  <el-table-column type="index" width="50" />

                  <el-table-column property="name" label="Name" width="120" />

                </el-table>
              </van-col>
            </van-row>
          </div>



        </el-dialog>
      </van-col>
    </van-row>

  </div>
</template>

<script>
import myaxios from "../../../https/myaxios";
myaxios
export default {
  name: "workflow",
  data(){
    return{
      worklist:[],
      lst:[{"label":"名称"}],
      typevalues:{},
      values:{},
      sourcevalues:{},
      id:'',
      tableData:[],
      sourcelist:[],
      dialogTableVisible:false,
      selectid:'',
    }
  },methods:{
    selectdata(){
      for(var i=0;i<this.sourcelist.length;i++){
        if(this.selectid==this.sourcelist[i]["id"]){
          this.tableData=this.sourcelist[i]["mes"]
        }
      }
    },
    add(){
      this.lst.push({"label":"名称"})
    },
    addwork(){
      let tlst=[]
      for(var i=0;i<this.lst.length;i++){
        let dic={"name":this.values[i],"type":this.typevalues[i],"value":this.sourcevalues[i]}
        tlst.push(dic)
      }
      console.log(this.typevalues)
      console.log(tlst)
    },
    getdata(){
      myaxios("worklist","get").then(res=>{
        this.worklist=res.list
      })
    },
    getsource(index){
      localStorage.setItem("index",index)
      myaxios("getsource","get").then(res=>{
        this.sourcelist=res.list
      })
      this.dialogTableVisible=true
    },
    handleCurrentChange(val) {
      this.dialogTableVisible=false
      let index = localStorage.getItem('index')
      // this.sourcevalues[index] = JSON.stringify(val['mes'])
      this.sourcevalues[index] = JSON.stringify(val)
    },

  },mounted() {
    this.getdata()
  }
}
</script>

<style scoped>

</style>